<template>
  <a-modal
    v-model:visible="props.seleoptiBloon"
    width="50%"
    cancelText="退出评阅"
    @cancel="pageGoBack"
    @ok="SeleOpOk"
    :title="seleOptiTitle"
  >
    <table class="topClose" width="100%">
      <thead>
        <tr>
          <th>请选择评阅科目</th>
          <th> {{ isJdType ? '客观题' : '主观题' }}</th>
          <th>重评题</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="!text-left !py-1 !px-2">
            <a-radio-group v-model:value="Data.kmdm" name="radioGroup" @change="selecheng">
              <a-radio :value="item.kmdm" v-for="item in seleOptions" :key="item.kmdm">
                {{ `${item.kmdm}(${item.kmmc})` }}
              </a-radio>
            </a-radio-group>
          </td>
          <td>
            <a-radio-group v-model:value="Data.radioGroupArr" name="radioGroup">
              <div v-for="item in Data.subjectiveMap">
                <!-- <span class="text-[14px] mr-2 font-semibold">{{ item.mkmc }}:</span> -->
                <a-radio :value="every" v-for="(every, index) in item.pyDataList" :key="every.stId">
                  {{ every.tmbh }}
                </a-radio>
              </div>
              <a-spin :spinning="Data.myworkStLoading" />
              <div
                class="text-[15px] text-[#999] text-center"
                v-if="Data.subjectiveMap.length === 0 && !Data.myworkStLoading"
              >
                <span> 暂无数据 </span>
              </div>
            </a-radio-group>
          </td>
          <td>
            <a-radio-group v-model:value="Data.radioGroupArr" name="radioGroup">
              <span v-for="(item, key) in Data.heavyMap" class="mr-3 mb-2">
                <a-radio :value="item" :key="item.stId">
                  {{ item.tmbh }}
                </a-radio>
              </span>
              <a-spin :spinning="Data.myworkCpStLoading" />
              <div
                class="text-[15px] text-[#999] text-center"
                v-if="Data.heavyMap.length === 0 && !Data.myworkCpStLoading"
              >
                <span> 暂无数据 </span>
              </div>
            </a-radio-group>
          </td>
        </tr>
      </tbody>
    </table>
  </a-modal>
</template>

<script lang="ts" setup>
import { isJdCorrectType } from '/@/views/examination-audit/abnormal-teacher/index'
import { reactive, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
import {
  getPyDataSelectList,
  getExtractZycZgt,
  getExtractZycKgt,
  getCpDataByAccount,
} from '/@/api/teacher'

import { useTeacherMarkStore } from '/@/store/modules/teacherMark'
const teacherMarkStore = useTeacherMarkStore()

import { useMessage } from '/@/hooks/web/useMessage'
const { createMessage } = useMessage()

const emits = defineEmits(['update:seleoptiBloon'])

const props = defineProps({
  seleoptiBloon: {
    type: Boolean,
    default: false,
  },
  seleOptiTitle: {
    type: String,
    default: '',
  },
  seleOptions: {
    type: Array,
    default: (): any => [],
  },
  isJdType: {
    tepe: Boolean,
    default: false,
  },
} as any)

const Data: any = reactive({
  kmdm: '',
  subjectiveMap: [],
  radioGroupArr: {},
  heavyMap: [],
  myworkStLoading: false,
  myworkCpStLoading: false,
})

watch(
  () => props.seleoptiBloon,
  val => {
    if (val) {
      Data.kmdm = route.query.kmdm
      selecheng()
    }
  },
  { deep: true }
)

// 选择科目
async function selecheng() {
  Data.myworkStLoading = true
  Data.myworkCpStLoading = true
  getTodoDaYcXx()
  let { code, data } = await getPyDataSelectList({
    kmdm: Data.kmdm,
  })
  Data.subjectiveMap = []
  if (code == 200) {
    data.forEach(ele => {
      ele.pyDataList?.sort((a, b) => a.tmxh - b.tmxh)
      ele.pyDataList = ele.pyDataList.filter(
        item =>
          (props.isJdType && isJdCorrectType(item)) || (!props.isJdType && !isJdCorrectType(item))
      )
      if ((props.isJdType && isJdCorrectType(ele)) || (!props.isJdType && !isJdCorrectType(ele))) {
        Data.subjectiveMap.push(ele)
      }
    })
  }
  Data.myworkStLoading = false
}

/**
 * 获取待重评的题吗
 */
async function getTodoDaYcXx() {
  Data.heavyMap = []
  let { code, data } = await getCpDataByAccount({ kmdm: Data.kmdm })
  if (code == 200) {
    data?.sort((a, b) => a.tmxh - b.tmxh)
    data.forEach(ele => {
      if ((props.isJdType && isJdCorrectType(ele)) || (!props.isJdType && !isJdCorrectType(ele))) {
        Data.heavyMap.push(ele)
      }
    })
  }
  Data.myworkCpStLoading = false
}

function pageGoBack() {
  emits('update:seleoptiBloon', false)
  setTimeout(() => {
    router.go(-1)
  }, 100)
}

async function SeleOpOk() {
  if (!Data.radioGroupArr.stId) return createMessage.error('请选择评阅试题')
  if (!Data.radioGroupArr.pyZycIdList) {
    let requestfun = props.isJdType ? getExtractZycKgt : getExtractZycZgt
    let { code, data, message } = await requestfun({
      stId: Data.radioGroupArr.stId,
      kmdm: Data.kmdm,
    })
    if (code == 200) {
      teacherMarkStore.setQuestions(data)
    } else if (code == 8104 || code == 8103) {
      // 当前题型已经没有试题了
      createMessage.error(message)
      return
    }
  } else {
    teacherMarkStore.setQuestions(Data.radioGroupArr)
  }
  for (let i = 0; i < props.seleOptions?.length; i++) {
    if (props.seleOptions[i].kmdm == Data.kmdm) {
      router.replace({
        name: props.isJdType ? 'TeacherChoice' : 'Review',
        query: {
          ...props.seleOptions[i],
          time: +new Date(),
        },
      })
      emits('update:seleoptiBloon', false)
      break
    }
  }
}
</script>

<style lang="less" scoped>
.topClose {
  text-align: center;

  thead tr th {
    text-align: center;
    border: 1px solid #e8e8e8;
    line-height: 60px;
    background-color: #eff6ff;
    width: 20%;

    &:nth-child(n + 2) {
      width: 40%;
    }
  }

  tbody tr td {
    text-align: center;
    border: 1px solid #e8e8e8;
    line-height: 40px;
    width: 20%;
    padding: 10px;

    &:nth-child(n + 2) {
      box-sizing: border-box;
      width: 40%;
      text-align: start;
    }

    &:first-child {
      ::v-deep(.ant-select-selector) {
        border: none;
        background-color: #1890ff;

        .ant-select-selection-item {
          color: #fff;
        }
      }

      ::v-deep(.ant-radio-inner) {
        background-color: #999999;
        border-width: 4px;
      }
    }
  }
}
</style>
